<template>
  <div id="app">

        <TabLeft :tabs="tabs" :currentIndex="currentIndex" @deliverIndex="changelist"></TabLeft>
        <TabRight :tabs="tabs" :currentIndex="currentIndex"></TabRight>

  </div>
</template>

<script>
import TabLeft from './components/TabLeft.vue'
import TabRight from './components/TabRight.vue'
export default {
    data(){
        return{
            currentIndex:0,
           tabs:[
            {
                tabName:"三文鱼",
                xcArr:[
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F0ccc70409c29b61e9b2e5c5b87fdd1e9eb7ae06f32cd0-F9WUYy_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668522891&t=9f8438fa121c1586790e911db2bf76c2",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://img1.baidu.com/it/u=430893852,3576790965&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploadfile.bizhizu.cn%2Fup%2F29%2F60%2F12%2F2960122d5f40ee40f1cda7cf3accc798.jpg.source.jpg&refer=http%3A%2F%2Fuploadfile.bizhizu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668522891&t=a7e2d38fd33824c424a10347edd343eb",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            },
            {
                tabName:"刺身",
                xcArr:[
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20140903%2Fhuatingjinxiucishenpinpan_3006075.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668523119&t=c5040114569418f4d5d2257cb1ab16a9",title:"刺身",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Fpre%2F201707%2F17%2Fcishen-003.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668523119&t=2d3a4a058536b6b60c5991b216b8e5d9",title:"刺身",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ntimg.cn%2Ffile%2F20201121%2F4218203_133654910552_2.jpg&refer=http%3A%2F%2Fpic.ntimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668523119&t=6836e489c4dcdb922041b33e8656fe5f",title:"刺身",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            },
            {
                tabName:"大虾",
                xcArr:[
                {pic:"https://img1.baidu.com/it/u=195806858,3048703327&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=408",title:"皮皮虾",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://img2.baidu.com/it/u=435614342,1086982123&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=500",title:"油焖大虾",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yifen.com%2F2021%2F6%2F6cbe202d-253e-4db1-8a50-571d5f0d45f8-small.jpg&refer=http%3A%2F%2Fimg.yifen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668523333&t=530b55a218bf57011c4a5ce9c8e64850",title:"虾尾",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            }
           ]
        }
    },
    components:{
    TabLeft,
    TabRight
  },
  methods:{
    changelist(index){
      this.currentIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  display: flex;
  height: 100%;
}

</style>
